<template>
    <view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap="close"
        @touchmove.stop.prevent>
        <swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular">
            <swiper-item v-for="(img, i) in imgs" :key="'swiper-item-' + i" :id="'swiper-item-' + i">
                <movable-area class="marea" scale-area>
                    <movable-view :id="'movable-view-' + i" :key="'movable-view-' + i" class="mview" direction="all"
                        :out-of-bounds="false" :inertia="true" damping="90" friction="2" scale="true" scale-min="1"
                        scale-max="4" :scale-value="scale" @scale="onScale" @change="movableChange">
                        <image :id="'image-' + i" :key="'movable-view' + i" class="image" :src="img"
                            :style="{ transform: 'rotateZ(' + deg + 'deg)' }" :data-index="i" :data-src="img"
                            mode="widthFix" @touchmove="handletouchmove" @touchstart="handletouchstart"
                            @touchend="handletouchend" />
                    </movable-view>
                </movable-area>
            </swiper-item>
        </swiper>
        <view class="page" v-if="imgs.length > 0">
            <text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
        </view>

        <view class="to" v-if="toBtn" @click.stop.prevent="to"><text class="text">打开图片链接</text></view>
        <view class="right-btn">
            <text class="text" v-if="saveBtn" @click.stop.prevent="save">保存</text>
            <text class="text" v-if="rotateBtn" @click.stop.prevent="rotate">旋转</text>
        </view>
        <view class="desc" v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{
            descs[index] }}</view>
    </view>
</template>

<script>
// 属性	类型	必填	默认	说明
// imgs	数组	是	空	图片地址数组
// imgObjs	数组	是	空	完整图片数组列表
// descs	数组	否	空	图片描述数组，和地址对应
// opacity	数字	否	0.8	透明度，有效值为 0 到 1 之间
// toBtn	布尔	否	false	是否显示打开按键
// saveBtn	布尔	否	false	是否显示保存按键
// rotateBtn	布尔	否	false	是否显示旋转按键
// circular	布尔	否	false	是否可以循环预览
// longPress	事件	否	空	长按事件，返回对象：{src:地址,index:序号}
var app = getApp();
export default {
    name: '', //插件名称
    props: {
        imgs: {
            //图片列表
            type: Array,
            required: true,
            default: () => {
                return [];
            }
        },
        imgObjs: {
            //完整图片数组列表
            type: Array,
            required: true,
            default: () => {
                return [];
            }
        },
        descs: {
            //描述列表
            type: Array,
            required: false,
            default: () => {
                return [];
            }
        },
        //透明度,0到1之间。
        opacity: {
            type: Number,
            default: 0.8
        },
        //保存按键
        saveBtn: {
            type: Boolean,
            default: false
        },
        //打开链接按键
        toBtn: {
            type: Boolean,
            default: false
        },
        //旋转按键
        rotateBtn: {
            type: Boolean,
            default: false
        },
        //循环预览
        circular: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            swiper: false,//是否禁用
            show: false, //显示状态
            index: 0, //当前页
            deg: 0, //旋转角度
            time: 0, //定时器
            interval: 1000, //长按事件
            scale: 1 //缩放比例
        };
    },
    methods: {
        //比例变化
        onScale(e) {

        },

        //长按事件相关内容---------开始-------------------
        //接触开始
        handletouchstart(e) {
            var tchs = e.touches.length;
            if (tchs != 1) {
                return false;
            }
            this.time = setTimeout(() => {
                this.onLongPress(e);
            }, this.interval);
            return false;
        },
        //清除定时器
        handletouchend() {
            clearTimeout(this.time);
            if (this.time != 0) {
                //处理点击时间
            }
            return false;
        },
        //清除定时器
        handletouchmove() {
            clearTimeout(this.time);
            this.time = 0;
        },
        // 处理长按事件
        onLongPress(e) {
            var src = e.currentTarget.dataset.src;
            var index = e.currentTarget.dataset.index;
            var data = { src: src, index: index };
            this.$emit('longPress', data);
        },
        //长按事件相关内容---------结束-------------------

        //图片改变
        swiperChange(e) {
            this.index = e.target.current; //更新当前图片index

            this.$nextTick(function () {
                this.scale = 1;
            })

            //this.deg = 0; //旋转角度
            //this.swiper=true;
        },

        //移动变化
        movableChange(e) {
            //console.log(e);
            /* if(this.old.scale <= 1){
                this.swiper=false;
            }else if(e.detail.x===0){
                this.swiper=false;
            } */
        },

        //打开链接
        to(e) {
            var src = this.imgObjs[this.index].hrefurl;
            if (src) {
                app.goto(src);
            } else {
                app.error('hrefurl链接为空')
            }
        },

        //保存
        save(e) {
            var _this = this;
            var src = this.imgs[this.index];
            //#ifdef MP-WEIXIN
            //提前向用户发起授权请求
            uni.authorize({
                scope: 'scope.writePhotosAlbum',
                success() {
                    console.log('dp-previewImage:允许储存');
                    _this.downloadImg(src);
                }
            });
            //#endif

            //#ifdef APP-PLUS
            this.downloadImg(src);
            //#endif

            //#ifdef H5
            //非同源图片将直接打开
            var abtn = document.createElement('a');
            abtn.href = src;
            abtn.download = '';
            abtn.target = '_blank';
            abtn.click();
            //#endif
        },

        //下载并保存文件
        downloadImg(src) {
            //下载图片文件
            uni.showLoading({
                title: '大图提取中'
            });
            uni.downloadFile({
                url: src,
                success: function (res) {
                    console.log('dp-previewImage:下载成功');
                    uni.hideLoading();
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: () => {
                            uni.showToast({
                                title: '已保存至相册',
                                duration: 1000
                            });
                        }
                    });
                },
                fail: function (res) {
                    uni.hideLoading();
                    uni.showToast({
                        title: '图片下载失败:' + res,
                        icon: 'none',
                        duration: 1000
                    });
                    uni.setClipboardData({
                        data: res,
                        success: () => {
                        }
                    });
                }
            });
        },

        //旋转
        rotate(e) {
            this.deg = this.deg == 270 ? 0 : this.deg + 90;
        },
        //打开
        open(e) {
            if (e === null || e === '') {
                console.log('dp-previewImage:打开参数无效');
                return;
            }

            if (!isNaN(e)) {
                if (e >= this.imgs.length) {
                    console.log('dp-previewImage:打开参数无效');
                } else {
                    this.index = e;
                }
            } else {
                var index = this.imgs.indexOf(e);
                if (index === -1) {
                    this.imgs = [e];
                    this.index = 0;
                    console.log('dp-previewImage:未在图片地址数组中找到传入的图片，已为你自动打开单张预览模式')
                } else {
                    this.index = this.imgs.indexOf(e);
                }
            }
            console.log('dp-previewImage:当前预览图片序号' + this.index);
            this.show = true;
        },
        //关闭
        close(e) {
            this.show = false;
            this.index = 0; //当前页
            this.deg = 0; //旋转角度
            this.time = 0; //定时器
            this.interval = 1000; //长按事件
            this.scale = 1; //缩放比例
        }
    }
};
</script>

<style lang="scss" scoped>
.previewImage {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    user-select: none;

    .swiper {
        width: 100%;
        height: 100%;

        .marea {
            height: 100%;
            width: 100%;
            position: fixed;
            overflow: hidden;

            .mview {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: auto;
                min-height: 100%;

                .image {
                    width: 100%;
                }
            }
        }
    }

    .page {
        position: absolute;
        width: 100%;
        bottom: 40rpx;
        text-align: center;

        .text {
            color: #fff;
            font-size: 26rpx;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 3rpx 16rpx;
            border-radius: 20rpx;
            user-select: none;
        }
    }

    .to {
        position: absolute;
        left: 20rpx;
        // width: 120rpx;
        height: 56rpx;
        bottom: 30rpx;
        text-align: center;
        padding: 10rpx;

        .text {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 30rpx;
            border-radius: 20rpx;
            border: 1rpx solid #f1f1f1;
            padding: 6rpx 22rpx;
            user-select: none;
        }

        .text:active {
            background-color: rgba(100, 100, 100, 0.5);
        }
    }

    .right-btn {
        position: absolute;
        right: 20rpx;
        // width: 120rpx;
        height: 56rpx;
        bottom: 30rpx;
        text-align: center;
        padding: 10rpx;

        .text {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 30rpx;
            border-radius: 20rpx;
            border: 1rpx solid #f1f1f1;
            padding: 6rpx 22rpx;
            user-select: none;
            margin: 10rpx;
        }

        .text:active {
            background-color: rgba(100, 100, 100, 0.5);
        }
    }

    .desc {
        position: absolute;
        top: 0;
        width: 100%;
        padding: 5rpx 10rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 28rpx;
        letter-spacing: 3rpx;
        user-select: none;
    }
}
</style>
